<template>
  <view class="page bg-white">
    <view class="main">
      <!-- 职务 -->
      <u-text color="#333" size="32rpx" text="职务" bold></u-text>
      <view class="form-item" @click="showJobPopup = true">
        <view class="flex-1 flex gap">
          <template v-if="formData.job.length > 0">
            <u-tag v-for="item in formData.job" :key="item" :text="item"></u-tag>
          </template>
          <u-text text="请选择职务" size="32rpx" color="#333" v-else></u-text>
        </view>
        <u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
      </view>

      <!-- 任教学科 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="任教学科" bold></u-text>
      <view class="form-item" @click="showSubjectPopup = true">
        <view class="flex-1 flex gap">
          <template v-if="formData.subject.length > 0">
            <u-tag v-for="item in formData.subject" :key="item" :text="item"></u-tag>
          </template>
          <u-text text="请选择任教学科" size="32rpx" color="#333" v-else></u-text>
        </view>
        <u-icon name="arrow-down" size="32rpx" color="#999" @click="confirmSubject"></u-icon>
      </view>

      <!-- 教学年级 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="教学年级" bold></u-text>
      <view class="form-item" @click="showGradePopup = true">
        <view class="flex-1 flex gap">
          <template v-if="formData.grade.length > 0">
            <u-tag v-for="item in formData.grade" :key="item" :text="item"></u-tag>
          </template>
          <u-text text="请选择教学年级" size="32rpx" color="#333" v-else></u-text>
        </view>
        <u-icon name="arrow-down" size="32rpx" color="#999" @click="confirmGrade"></u-icon>
      </view>

      <!-- 负责班级 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="负责班级" bold></u-text>
      <view class="form-item" @click="showClassPopup = true">
        <view class="flex-1 flex flex-col gap">
          <template v-if="formData.class.length > 0">
            <u-tag v-for="item in formData.class" :key="item" :text="item"></u-tag>
          </template>
          <u-text text="请选择负责班级" size="32rpx" color="#333" v-else></u-text>
        </view>
        <u-icon name="arrow-down" size="32rpx" color="#999" @click="confirmSubject"></u-icon>
      </view>

      <!-- 职务选择弹窗 -->
      <up-popup :show="showJobPopup" @close="showJobPopup = false">
        <view class="padding">
          <view class="flex">
            <u-text text="取消" size="32rpx" color="#666" @click="showJobPopup = false"></u-text>
            <u-text align="right" text="确定" size="32rpx" color="#0060E6" @click="confirmJob"></u-text>
          </view>
          <view class="margin-top-lg">
            <up-checkbox-group :borderBottom="true" iconPlacement="right" v-model="formData.job" placement="column">
              <up-checkbox labelSize="32rpx" activeColor="#0060E6" :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in jobList" :key="index" :label="item.name" :name="item.name">
              </up-checkbox>
            </up-checkbox-group>
          </view>
        </view>
      </up-popup>

      <!-- 任教学科选择弹窗 -->
      <up-popup :show="showSubjectPopup" @close="showSubjectPopup = false">
        <view class="padding">
          <view class="flex">
            <u-text text="取消" size="32rpx" color="#666" @click="showSubjectPopup = false"></u-text>
            <u-text align="right" text="确定" size="32rpx" color="#0060E6" @click="confirmSubject"></u-text>
          </view>
          <view class="margin-top-lg">
            <up-checkbox-group :borderBottom="true" iconPlacement="right" v-model="formData.subject" placement="column">
              <up-checkbox labelSize="32rpx" activeColor="#0060E6" :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in subjectList" :key="index" :label="item.name" :name="item.name">
              </up-checkbox>
            </up-checkbox-group>
          </view>
        </view>
      </up-popup>

      <!-- 教学年级选择弹窗 -->
      <up-popup :show="showGradePopup" @close="showGradePopup = false">
        <view class="padding">
          <view class="flex">
            <u-text text="取消" size="32rpx" color="#666" @click="showGradePopup = false"></u-text>
            <u-text align="right" text="确定" size="32rpx" color="#0060E6" @click="confirmSubject"></u-text>
          </view>
          <view class="margin-top-lg">
            <up-checkbox-group :borderBottom="true" iconPlacement="right" v-model="formData.grade" placement="column">
              <up-checkbox labelSize="32rpx" activeColor="#0060E6" :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in gradeList" :key="index" :label="item.name" :name="item.name">
              </up-checkbox>
            </up-checkbox-group>
          </view>
        </view>
      </up-popup>

      <!-- 负责班级选择弹窗 -->
      <up-popup :show="showClassPopup" @close="showClassPopup = false">
        <view class="padding">
          <view class="flex">
            <u-text text="取消" size="32rpx" color="#666" @click="showClassPopup = false"></u-text>
            <u-text align="right" text="确定" size="32rpx" color="#0060E6" @click="confirmClass"></u-text>
          </view>
          <view class="margin-top-lg">
            <up-checkbox-group :borderBottom="true" iconPlacement="right" v-model="formData.class" placement="column">
              <up-checkbox labelSize="32rpx" activeColor="#0060E6" :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in classList" :key="index" :label="item.name" :name="item.name">
              </up-checkbox>
            </up-checkbox-group>
          </view>
        </view>
      </up-popup>
    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <u-button shape="circle" size="large" :color="themePrimary" text="保存"></u-button>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme';

const { themePrimary } = useTheme();
const formData = ref({
  job: [],
  subject: [],
  grade: [],
  class: []
})
// 职务弹窗
const showJobPopup = ref(false)
// 任教学科弹窗
const showSubjectPopup = ref(false)
// 教学年级弹窗
const showGradePopup = ref(false)
// 负责班级弹窗
const showClassPopup = ref(false)
// 职务列表
const jobList = ref([
  {
    name: '讲师'
  },
  {
    name: '班主任'
  },
  {
    name: '执行校长'
  }
])
// 任教学科列表
const subjectList = ref([
  {
    name: '语文'
  },
  {
    name: '数学'
  },
  {
    name: '英语'
  }
])
// 教学年级列表
const gradeList = ref([
  {
    name: '一年级'
  },
  {
    name: '二年级'
  },
  {
    name: '三年级'
  },
  {
    name: '四年级'
  },
  {
    name: '五年级'
  },
  {
    name: '六年级'
  }
])
// 负责班级列表
const classList = ref([
  {
    name: '托管班：一年级（A）班'
  },
  {
    name: '周末班：一年级-数学（A）班'
  },
])
// 确认职务
const confirmJob = () => {
  showJobPopup.value = false
}

// 确认负责班级
const confirmClass = () => {
  showClassPopup.value = false
}

// 确认教学年级
const confirmGrade = () => {
  showGradePopup.value = false
}

// 确认任教学科
const confirmSubject = () => {
  showSubjectPopup.value = false
}
</script>
<style scoped lang="scss">
.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F7F7F7;
  padding: 30rpx;
  margin-top: 20rpx;
  border-radius: 20rpx;
}

.camera-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 54rpx;
  height: 54rpx;
}
</style>